// 1 导入相关包
// import React from 'react'; // 创建react 元素的
import ReactDOM from 'react-dom/client'; //渲染 react 元素的
// 引入css
import './index.css';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 在JSX中如何使用JS中的数据 {表达式}
// 1. 字符串类型
let name = 'Jack';
// 2. 数字类型
let age = 18;
// 3. 数组类型
let hobbies = ['吃饭', '睡觉', '敲代码'];
// 4. 对象类型
let obj = {
  name: 'Rose',
  age: 18,
};
// 5. 三元表达式
// 6. 函数类型
let fn = () => {
  console.log('我只是一个什么都没干的函数');
  return 123;
};
// 7. JSX表达式类型
let jsx = <p>我是一个jsx表达式</p>;
// 8. 渲染一张图片
let imgUrl =
  'https://www.baidu.com/img/pc_675fe66eab33abff35a2669768c43d95.png';

const jsxElem = (
  <div>
    <h1>我是：{name}</h1>
    <h1>我今年：{age}</h1>
    <h1>爱好：{hobbies.join('=>')}</h1>
    <h1>
      对象：{obj.name}, {obj.age}
    </h1>
    {/* 三元表达式 */}
    <h1>{age > 18 ? '谈恋爱' : '好好学习'}</h1>
    <h1>{fn()}</h1>
    <div>{jsx}</div>
    <img src={imgUrl} alt="我是图片"></img>
  </div>
);

// 渲染
root.render(jsxElem);
